const { rangeJoinChar } = require("../../compile/vue/_consts");

const defaultFieldAttrs = {
  input: {
    attrs: {
      placeholder: "请输入${label}",
      // maxlength: 30,
      clearable: true,
      showWordLimit: true,
    },
  },
  select: {
    attrs: {
      // style: {
      //   // width: "100%",
      //   minWidth: "150px", // minWidth 在作为表单子项时，是需要设置的，不然宽度会塌陷
      // },
      // placeholder: "请选择${label}",
      clearable: true,
      tagType: "primary", // 用户标签类型 success/info/warning/danger/primary
      loadingText: "玩命加载中……",
      getInferredAttrs(field) {
        const { remote, multiple } = field.attrs || {};
        let multiAttrs;
        if (multiple) {
          multiAttrs = {
            collapseTags: true,
            collapseTagsTooltip: true,
            maxCollapseTags: 2,
          };
        }
        return {
          placeholder: remote ? "请输入关键字搜索${label}" : "请选择${label}",
          ...multiAttrs,
        };
      },
    },
  },
  "tree-select": {
    attrs: {
      style: { width: "100%" },
      placeholder: "请选择${label}",
      clearable: true,
    },
  },
  cascader: {
    attrs: {
      style: { width: "100%" },
      placeholder: "请选择${label}",
      clearable: true,
    },
  },
  "date-picker": {
    attrs: {
      // style: { width: "100%" },
      type: "daterange", // 'year' | 'years' |'month' | 'months' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange'| 'yearrange'
      rangeSeparator: rangeJoinChar,
      format: "YYYY-MM-DD", //显示在输入框中的格式
      valueFormat: "YYYY-MM-DD", //绑定值的格式。 不指定则绑定值为 Date 对象
      placeholder: "请选择${label}",
      clearable: true,
      getInferredAttrs(field) {
        const { attrs = {} } = field;
        const { type, format } = attrs;
        const newAttrs = {};
        // 如果 format 为 YYYY-MM-DD HH:mm:ss 类型，则将 type 变为 datetimerange 类型
        if (format?.includes(" ")) newAttrs.type = "datetimerange";
        const newType = newAttrs.type ?? type;
        if (!newType.endsWith("range")) return newAttrs;
        const defaultTime = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]; // 当选择同一天时，会以[2024-09-03 00:00:00, 2024-09-03 23:59:59]查询
        const rangeMap = {
          daterange: {
            text: "日期",
            attrs: {
              shortcuts: defaultDateRangeShortcuts,
              defaultTime, // 范围选择时选中日期所使用的当日内具体时刻
              // defaultValue: [], //选择器打开时默认显示的时间
            },
          },
          datetimerange: {
            text: "时间",
            attrs: {
              defaultTime,
            },
          },
          monthrange: {
            text: "月份",
            attrs: {},
          },
        };
        const { text, attrs: selfAttrs } = rangeMap[newType];
        newAttrs.startPlaceholder = `开始${text}`;
        newAttrs.endPlaceholder = `结束${text}`;
        Object.assign(newAttrs, selfAttrs);
        return newAttrs;
      },
    },
  },
  switch: {
    attrs: {
      activeValue: 1,
      inactiveValue: 0,
      activeText: "启用",
      inactiveText: "禁用",
      inlinePrompt: true,
    },
    quickAttrs: {
      middleFlexGrow: 0,
    },
  },
  checkbox: {
    quickAttrs: {
      middleFlexGrow: 0,
    },
  },
  "checkbox-group": {
    attrs: {
      options: [], // [{ label: "多选项1" }]
    },
    quickAttrs: {
      middleFlexGrow: 0,
    },
  },
  "radio-group": {
    attrs: {
      options: [], // [{ label: "单选项-error" }]
      type: "button",
    },
    quickAttrs: {
      middleFlexGrow: 0,
    },
  },
  "input-number": {
    attrs: {
      // style: { width: "100%" },
      placeholder: "${label}",
      // getInferredAttrs(field: FormFieldAttrs) {
      //   const { style = {} } = field.attrs;
      //   const { before, after } = field;
      //   if ((before || after) && !style.width) {
      //     style.flex = 1;
      //     return style;
      //   }
      // },
    },
    quickAttrs: {
      middleFlexGrow: 0,
    },
  },
  // slider: {
  //   attrs: {
  //     // showInput: false,
  //   },
  // },
  autocomplete: {
    attrs: {
      // style: { width: "100%" },
      placeholder: "请输入${label}",
      // maxlength: 30,
      clearable: true,
      showWordLimit: true,
      fetchSuggestions(val, cb) {
        cb([{ label: val, value: val }]);
      },
      // onSelect(item: CommonObj) {
      //   console.log(item);
      // },
    },
  },
  "time-picker": {
    attrs: {
      // style: { width: "100%" },
      placeholder: "请选择${label}",
      rangeSeparator: rangeJoinChar,
      clearable: true,
    },
  },
  "time-select": {
    attrs: {
      // style: { width: "100%" },
      placeholder: "请选择${label}",
      clearable: true,
    },
  },
  BaseNumberRange: {
    attrs: {
      // style: { width: "100%" },
    },
  },
  BaseUpload: {
    quickAttrs: {
      middleFlexGrow: 0,
    },
  },
  // BasicEditor: {
  //   attrs: {
  // style: { width: "100%" },
  //   },
  // },
};

// 基础必备列
module.exports = {
  /*** 系统内置基础列 ***/
  //序号列
  T_Index: {
    prop: "$index",
    label: "序号",
    type: "index",
    width: 74, // 54,
    fixed: "left",
    // index: (ind: number) => ind + 1 + (currPage - 1) * pageSize,
  },
  //排序列
  T_Sort: {
    prop: "$sort",
    label: "排序",
    type: "sort",
    width: 74, //54,
    fixed: "left",
  },
  //多选列
  T_Selection: {
    prop: "$selection",
    label: "选择",
    type: "selection",
    width: 48,
    fixed: "left",
  },
  //操作列
  T_Operate: {
    prop: "$operate",
    label: "操作",
    type: "operate",
    // minWidth: 250,
    fixed: "right",
  },
  /*** 系统内置组件列 ***/
  // 操作人/操作时间
  T_OperateTime: {
    prop: "operate_time",
    label: "操作人/时间", // 含创建/更新两种类型（或更多其他类型）
    type: "OperateTime",
  },
  //是否启用状态
  T_BaseTag: {
    prop: "status",
    label: "状态",
    minWidth: 90,
    type: "BaseTag",
    attrs: { name: "D_EnableStatus" },
  },
  //图片
  T_BaseImg: {
    prop: "imgUrl",
    label: "图片",
    type: "BaseImg",
    minWidth: 136,
    attrs: {
      size: "120",
      style: "margin: 0 auto",
    },
  },
  //文本省略显示，点击查看更多
  T_BaseText: {
    prop: "content",
    label: "内容",
    type: "BaseText",
    minWidth: 250,
  },
  // 文本复制
  T_BaseCopy: {
    minWidth: 190,
    type: "BaseCopy",
  },
  /*** 表单控件列 ***/
  //switch开关
  T_Switch: {
    prop: "status",
    label: "启用状态",
    minWidth: 80,
    type: "switch",
    attrs: defaultFieldAttrs?.switch?.attrs,
  },
  // input输入框
  T_Input: {
    prop: "value",
    label: "编辑内容",
    type: "input",
    minWidth: 200,
    attrs: defaultFieldAttrs?.input?.attrs,
    getInferredAttrs(col) {
      const { label, attrs = {} } = col;
      const { placeholder: phr } = attrs;
      return {
        placeholder: phr?.replace("${label}", label),
      };
    },
  },
  /*** 外部组件列 ***/
  // 例：用户信息
  // T_UserInfo: {
  //   prop: "userData",
  //   label: "用户信息",
  //   fixed: "left",
  //   type: "UserInfo",
  //   getInferredAttrs(col) {
  //     return {
  //       width: col?.attrs?.simple ? 222 : 440,
  //     };
  //   },
  // },
};
